{{Extend "db/index"}}
{{Block "main"}}
<div class="row">
    <div class="col-md-12">
        {{Include "db/mysql/dbinfo_btn"}}
        <div class="block-flat">
          <div class="header">							
            <h3>{{"选择数据库"|T}}</h3>
          </div>
          <div class="content">
              <div class="table-responsive">
				<table class="table no-border hover blue">
					<thead class="no-border">
						<tr>
							<th style="width:2%;"><strong></strong></th>
							<th><strong>{{"数据库"|T}}</strong></th>
							<th><strong>{{"字符集"|T}}</strong></th>
							<th><strong>{{"表数量"|T}}</strong></th>
							<th><strong>{{"大小"|T}}</strong><!-- ({{"计算"|T}}) --></th>
							<th style="width:50px"></th>
						</tr>
					</thead>
					<tbody class="no-border-x" id="tbody-content">
                        {{$dbColls := Stored.dbColls}}
                        {{$dbSizes := Stored.dbSizes}}
                        {{$dbTables := Stored.dbTables}}
                        
                        {{range $k,$v := Stored.dbList}}
						<tr>
							<td><input type="checkbox" class="icheck" value="{{$v}}"></td>
							<td><a href="{{dbMgrURL "listTable" $v}}">{{$v}}</a></td>
							<td>{{if $dbColls}}{{index $dbColls $k}}{{end}}</td>
							<td>{{if $dbTables}}{{index $dbTables $k}}{{end}}</td>
							<td>{{if $dbSizes}}{{index $dbSizes $k|FormatByte}}{{end}}</td>
                            <td><a href="{{dbMgrURL "modifyDb" $v}}" class="label label-primary"><i class="fa fa-pencil"></i></a></td>
						</tr>
                        {{end}}
					</tbody>
				</table>
			    </div>
                <fieldset>
                     <legend>{{"已选中"|T}} (<span id="selected-items-count">0</span>)</legend>
                     <button type="button" class="btn btn-default" id="drop-selected-dbs">{{"删除"|T}}</button>
                </fieldset>
          </div><!-- /.content -->
        </div><!-- /.block-flat -->
    </div>
</div>
{{/Block}}
{{Block "footer"}}
{{Super}}
{{Modal "__TMPL__/db/mysql/create_db.yaml"}}
<script type="text/template" id="tpl-create-db-form">
    <div class="form-group">
        <label>{{"数据库名称"|T|ToJS}}</label>
        <input class="form-control" type="text" value="" id="create-db-name">
    </div>
    <div class="form-group">
        <label>{{"字符集"|T|ToJS}}</label>
        <select class="form-control" id="create-db-collation" rel="utf8_general_ci">
            <option value=""></option>
        </select>
    </div>
</script>
<script>
function refreshList(){
    $.get(window.location.href,{'_pjax':'#tbody-content'},function(r){
        var e=$(r);
        $('#tbody-content').html(e.find('#tbody-content').html());
        perttyCheckbox();
    },'html');
}
function perttyCheckbox(){
    $('#selected-items-count').text($('#tbody-content .icheck:checked').length);
    App.iCheck('#tbody-content .icheck','click',function(){
        var v=$(this).prop('checked')?1:-1;
        var c=$('#selected-items-count');
        var n=parseInt(c.text());
        c.text(n+v);
    });
}
$(function(){
    perttyCheckbox();
    $('#create-db-modal .modal-body').html($('#tpl-create-db-form').html());
    $('#create-db').on('click',function(event){
		$('#create-db-modal').niftyModal('show',{afterOpen:function(modal){
            modal.find('#create-db-name').focus();
            if($('#create-db-collation').data('loaded'))return;
            $('#create-db-collation').data('loaded',1);
            $.get(window.location.href,{json:'collations'},function(r){
                if(r.Code<1){
                    return App.message(r.Info);
                }
                var str='',sel=$('#create-db-collation').attr('rel');
                for(var i in r.Data){
                    str+='<optgroup label="'+i+'">';
                    for(var j in r.Data[i]){
                        var s=sel==r.Data[i][j].Collation.String?' selected="selected"':'';
                        str+='<option'+s+'>'+r.Data[i][j].Collation.String+'</option>';
                    }
                    str+='</optgroup>';
                }
                $('#create-db-collation').append(str);
            },'json');
        }});
	});
    $('#create-db-modal .btn-primary:last').removeClass('md-close').on('click',function(){
        var name=$('#create-db-name').val();
        var coll=$('#create-db-collation').find('option:checked').text();
        $.get(window.location.href,{json:'create',name:name,collation:coll},function(r){
            if(r.Code==1){
                refreshList();
                $('#create-db-modal').niftyModal('hide');
                App.showDbLog(r.Data);
            }else{
                alert(r.Info);
                if(r.Zone){
                    $('#create-db-'+r.Zone).focus();
                }
            }
        },'json');
    });
    $('#drop-selected-dbs').click(function(){
        var dbs=[];
        var ckd=$('#tbody-content .icheck:checked');
        if(ckd.length<1){
            return App.message({title:'{{"出错了"|T}}',text:'{{"请选择您要删除的数据库"|T}}',class_name:'danger'},false);
        }
        ckd.each(function(){
            dbs.push($(this).val());
        });
        if(confirm('{{"确定要删除下面这些数据库吗？"|T}}\n'+dbs.join('\n')))
        $.post(window.location.href,{json:'drop',db:dbs},function(r){
            var hasData=typeof(r.Data)!='undefined';
            if(hasData && r.Data && r.Data.length>1){
                refreshList();
                if(hasData&&r.Data){
                    for(var i=0;i<r.Data.length;i++){
                        App.showDbLog(r.Data[i]);
                    }
                }
                return
            }
            if(r.Code==1){
                refreshList();
                if(hasData&&r.Data){
                    for(var i=0;i<r.Data.length;i++){
                        App.showDbLog(r.Data[i]);
                    }
                }
            }else{
                App.message({title:'{{"出错了"|T}}',text:r.Info,class_name:'danger'},false);
            }
        },'json');
    });
});
</script>
{{/Block}}